/**
 * Created by mapbar_front on 2019/7/29.
 */
import React,{Component} from 'react';
import Todo from './../Todo';

// function Toolbar(props){
//     console.log('props',props);
//     return (
//         <div>
//             <ThemeButton theme={props.theme}/>
//         </div>
//     )
// }
// function Button(props){
//     return  <div>
//                 {props.theme}
//             </div>
// }
//
// class ThemeButton extends Component{
//     render(){
//         console.log('this.props.theme',this.props.theme);
//         return <Button theme={this.props.theme}>Button</Button>
//     }
// }

// const ThemeContext = React.createContext('light');
// function Toolbar(){
//     return(
//         <ThemeButton/>
//     )
// }
// function Text(props){
//     return  <h2>
//                 { props.theme}
//             </h2>
// }
//
// class ThemeButton extends Component{
//     static contextType = ThemeContext;
//     render(){
//         return(
//             <Text theme={this.context}/>
//         )
//     }
// }
// class Contexts extends Component{
//     render(){
//         return(
//             <ThemeContext.Provider value="dark">
//                 <Toolbar/>
//             </ThemeContext.Provider>
//         )
//     }
// }

function Feed(props){
    return<div>{props.user}</div>
}
function NavgationBar(){
    return <div>NavgationBar</div>
}

function Link(){
    return <div>Link</div>
}

function Avatar(props){
    console.log('props',props);
    return  <div>
                {props.user},{props.size}
            </div>
}

function PageLayout(props){
    console.log('props',props);
    return (
        <div>
            {props.toBar}
        </div>
    )
}
function Page(props){
    console.log('Page',props);
    const user = props.user;
    const size = props.avataSize;
    const content = <Feed user={user}/>
    const topBar = (
        <NavgationBar>
            <Link>
                <Avatar user={user} size={size}/>
            </Link>
        </NavgationBar>
    )
    return <PageLayout toBar={topBar} content={content}/>
}

class Contexts extends Component{
    render(){
        return(
            <div>
                {/*<Page user="user" avataSize="avataSize"/>*/}
                <Todo/>
            </div>
        )
    }
}

export default Contexts;



